<template>
<el-row class="login-container" justify="center" align="middle">
  <el-card style="max-width: 480px;">
    <template #header>
      <div class="card-header">
             <img :src="imgUrl" alt="">
      </div>
    </template>
    <div class="jump-link">
      <el-link type="primary" @click="handleChange">{{formType?'返回登陆':'注册账号'}}</el-link>
    </div>
    <el-form 
    ref="loginFormRef"
    :model="loginForm" 
    style="max-width: 600px;" 
    class="demo-ruleForm"
    :rules="rules">
      <el-form-item prop="userName">
        <el-input v-model="loginForm.userName " :placeholder="'手机号'" :prefix-icon="UserFilled">
          </el-input>
          </el-form-item>
          <el-form-item prop="passWord">
        <el-input v-model="loginForm.passWord" type="password" :placeholder="'密码'" :prefix-icon="Lock">
          </el-input>
          </el-form-item>
          <el-form-item v-if="formType" prop="validCode">
          <el-input  v-model="loginForm.validCode" type="password" :placeholder="'验证码'" :prefix-icon="Lock"> 
            <template #append>
            <span @click=" countdownChange">
              {{countdown.validtext}}
            </span>

          </template>
          </el-input>        
         
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :style="{width:'100%'}" @click="submitForm(loginFormRef)">
             {{formType ?'注册账号':'登录 '}}
            </el-button>
          </el-form-item>
    </el-form> 
  </el-card>

</el-row>   

  </template> 
  
  <script setup>
  import {getCode,userAuthentication,login,menuPermissions} from '../../api'
  // import { placeholderSign } from 'element-plus/lib/components/table-v2/src/private.js';
  import { UserFilled, Lock} from '@element-plus/icons-vue'
import {ref,reactive,computed,toRaw} from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter} from 'vue-router'
import {useStore} from 'vuex'

  const imgUrl=new URL('../../../public/login-head.png/',import.meta.url).href;
  //表单初始数据
  const loginForm=reactive({
    userName:'',
    passWord:'',
    validCode:'',
    
  })
  const store=useStore()
 const routerList= computed(()=>store.state.menu.routerList )

  //切换表单0登录1注册
  const formType = ref(0); 

  
  //点击切换登录和注册
  const handleChange = () => {
    formType.value=formType.value?0:1 

   
  }
  //校验规则
  // const validataUser=(rule, value, callback) => {
  //  if(value===''){
  //   callback(new Error('请输入账号'))

  //  }else{
  //     const phoneRrg=   /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
  //     phoneRrg.test(value)? callback:callback(new Error('手机号格式不正确'))
  //  }
   
  // }
  const validataUser = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入账号'));
    } else {
        const phoneRrg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
        if (phoneRrg.test(value)) {
            // 验证通过，调用 callback 且不传入错误信息
            callback(); 
        } else {
            // 验证不通过，调用 callback 并传入错误信息
            callback(new Error('请输入正确格式的手机号，如以 1 开头的 11 位数字')); 
        }
    }
};
  //密码校验
  // const validataPass=(rule, value, callback) => {
  //  if(value===''){
  //   callback(new Error('请输入密码'))
  //  } else{
  //     const reg= /^[a-zA-Z]{4,}$/;
  //     reg.test(value)? callback:callback(new Error('请输入四位密码'))
  //  }
   
  // }
  const validataPass = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入密码'));
    } else {
        const reg = /^[a-zA-Z]{4,}$/;
        if (reg.test(value)) {
            // 验证通过，调用 callback 且不传入错误信息
            callback(); 
        } else {
            // 验证不通过，调用 callback 并传入错误信息
            callback(new Error('请输入至少四位字母的密码')); 
        }
    }
};
const  router= useRouter();
  //表单校验
  const rules = reactive({
    userName:[{validator:validataUser,trigger:'blur'}],
    passWord:[{ validator:validataPass ,trigger:'blur'}],
    validCode:[{ required: true, message: '请输入验证码', trigger: 'blur' }]
  })
  //发送短信
  const countdown=  reactive({
    validtext:'获取验证码',
    time:3
  })
  let flag=false
  const countdownChange=() => {

    // 如果已发送不处理
    if(flag)return
    const phoneRrg=   /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
        //手机号验证
        if(!loginForm.userName||!phoneRrg.test (loginForm.userName)){
          return  ElMessage({
    showClose: true,
    message: '请检查手机号是否正确',
    type: 'warning',
  })
            
        }

    //定时器
    const time= setInterval(()=>{
         if( countdown.time<=0){
          countdown.time=3
          countdown.validtext='获取验证码'
          flag=false
          clearInterval(time)
         } else 
         {countdown.time-=1
         countdown.validtext=`剩余${countdown.time}s`}
    },1000)
     flag=true
     getCode({tel:loginForm.userName}).then(({data})=>{
      console.log(data,'data')
       if(data.code===10000){
          ElMessage.success('发送成功')
        }
     }
    )
  }
  const loginFormRef=ref()
  //表单提交
 
//   const submitForm = async (formEl) => {
//   if (!formEl) return;
//   try {
//     // 手动触发校验
//     await formEl.validate();
//     // 根据表单类型调用不同的 API
//     let response;
//     if (formType.value) {
//       response = await userAuthentication(loginForm);
//       if (response.data.code === 10000) {
//         ElMessage.success('注册成功，登录');
//         formType.value = 0;
//       } else {
//         ElMessage.error('注册失败，请重试');
//       }
//     } else {
//       response = await login(loginForm);
//       if (response.data.code === 10000) {
//         ElMessage.success('登录成功');
//         console.log(response.data);

//       } else {
//         ElMessage.error('登录失败，请重试');
//       }
//     }
//   } catch (error) {
//     console.log('error submit!', error);
//     ElMessage.error('提交失败，请检查网络或输入信息');
//   }
// };
const submitForm = async (formEl) => {

  if (!formEl) return;
  try {
    // 手动触发校验
    await formEl.validate();
    // 根据表单类型调用不同的 API
    let response;
    if (formType.value) {
      response = await userAuthentication(loginForm);
      // 检查 response 和 response.data 是否存在
      if (response && response.data && response.data.code === 10000) {
        ElMessage.success('注册成功，登录');
        formType.value = 0;
      } else {
        ElMessage.error('注册失败，请重试');
      }
    } else {
      response = await login(loginForm);
      // 检查 response 和 response.data 是否存在
      if (response && response.data && response.data.code === 10000) {
        ElMessage.success('登录成功');
        // console.log(response.data);
        //将token和用户信息缓存到浏览器
      
        localStorage.setItem('pz_token',response.data.data.token)
        localStorage.setItem('pz_userInfoData',JSON.stringify(response.data.data.userInfo))
        console.log('Token 存储成功:', localStorage.getItem('pz_token'));
        menuPermissions().then(({data}) => {
          store.commit('dynamicMenu',data.data)
          console.log(routerList,'routerList')
        
          router.push('/')
          
        })
      
      } else {
        ElMessage.error('登录失败，请重试');
      }
    }
  } catch (error) {
    console.log('error submit!', error);
    ElMessage.error('提交失败，请检查网络或输入信息');
  }

};

// const submitForm = async (formEl) => {
//   if (!formEl) return;
//   try {
//     // 手动触发校验
//     await formEl.validate();
//     // 根据表单类型调用不同的 API
//     let response;
//     if (formType.value) {
//       response = await userAuthentication(loginForm);
//       // 检查 response 和 response.data 是否存在
//       if (response && response.data && response.data.code === 10000) {
//         ElMessage.success('注册成功，登录');
//         formType.value = 0;
//       } else {
//         ElMessage.error('注册失败，请重试');
//       }
//     } else {
//       response = await login(loginForm);
//       // 检查 response 和 response.data 是否存在
//       if (response && response.data && response.data.code === 10000) {
//         ElMessage.success('登录成功');
//         // 正确访问 token 和 userInfo 的路径
//         const token = response.data.data.token;
//         const userInfo = response.data.data.userInfo;
//         console.log('准备存储的 token:', token);
//         console.log('准备存储的 userInfo:', userInfo);
//         // 将 token 和用户信息缓存到浏览器
//         localStorage.setItem('pz_token', token);
//         localStorage.setItem('pz_userInfoData', JSON.stringify(userInfo));
//         console.log('存储后的 pz_token:', localStorage.getItem('pz_token'));
//         console.log('存储后的 pz_userInfoData:', localStorage.getItem('pz_userInfoData'));
//         router.push('/');
//       } else {
//         ElMessage.error('登录失败，请重试');
//       }
//     }
//   } catch (error) {
//     console.log('error submit!', error);
//     ElMessage.error('提交失败，请检查网络或输入信息');
//   }
// };


  </script>
  
  <style lang="less" scoped>
  :deep(.el-card__header) {
    padding: 0
  }
  .login-container {
    height: 100%;
    .card-header{
      background-color: #899fe1;
      img {
        width: 430px;
      }
    }
    .jump-link {
      text-align: right;
      margin-bottom: 10px;
    }
  }

  
    </style>